웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트의 이벤트 중에서 키를 계속 누르는 경우의 이벤트 제어 방법을 알아봅니다. 이 방법은 마우스에서도 동일하게 동작시킬 수 있습니다. 어떻게하면 가능할까요?
예를들어 클릭하면 숫자가 올라가는 요소가 있는 경우를 생각해봅니다. 일반적인 클릭 이벤트에서는 클릭을 계속 누르면 숫자가 하나 올라갈 것입니다. 만약 숫자가 0에서 100을 선택할 경우... 100번 클릭해야하겠죠? 이 방법이 아닌 키를 계속 누를 경우 계속해서 숫자가 올라간다면? 더욱 편한 방법일 것입니다. 아래는 키를 계속 누르는 경우의 이벤트 구현 방법에 대하여 알아봅니다.
# 마우스 또는 키보드를 계속 누르는 이벤트 구현하기
먼저 이벤트를 동작하게 하는 트리거에는 클릭은 있지만 클릭중?이라것은 없습니다. 그런 이유로 직접 클릭이 계속되고 있음을 구현해야합니다. 하지만 생각해보면 간단하게 구현할 수 있습니다. 그 이유는 클릭을 하는 동작이 나누어져 있기 때문입니다. 이벤트 트리거에는 아래와 같이 구분됩니다.- 1. keydown // 키가 눌러진 경우 동작
- 2. keyup // 키를 눌러진 후 다시 올라가는 경우 동작
이 두가지는 서로 반대되는 행동으로 keydown은 키가 눌러졌음을 그리고 keyup은 손에서 띄어졋음을 알 수 있죠. 이를 사용하여 keydown 이후에 keyup 이벤트가 빌생하지 않았다면 키를 계속 누르고 있음을 알 수 있겠죠!
마우스 역시 동일합니다. 아래의 두 가지 트리거를 통하여 현재 클릭중인지 아닌지를 판단할 수 있죠.
- 1. mousedown // 마우스가 눌러진 경우 동작
- 2. mouseup // 마우스가 눌러진 후 다시 올라갈 때 동작
! 참고사항
또 다른 이벤트 트리거인 keypress는 이처럼 키를 계속해서 누르고 있을때 발생하는 것으로 생각할 수 있습니다. 하지만 key가 눌러졌을때 이벤트가 나타나며 우리가 원하는 동작은 아닙니다.이제 위 방법을 사용하여 예제를 하나 만들어보겠습니다. 아래 코드를 봐주세요.
! 잠깐... click 이벤트와 mousedown 또는 mouseup의 차이점
혹시 이 둘의 차이점을 모르신 다면 간단하게 설명해보겠습니다. 마우스를 누르는 경우 마우스에 행해지는 동작은 두 가지, 마우스를 버튼을 누를 때와 손에 떼어 마우스 버튼이 다시 올라갈 때 두 가지로 구분될 수 있습니다. 마우스의 드래그를 생각하면 좀 더 명확한데~ 드래그 동작은 마우스가 눌러진 상태에서만 동작하게 되죠.# 키보드 또는 마우스 계속 누르는 이벤트 예제
이번 예제는 두 개의 버튼이 존재합니다. + 표시를 누르면 1이 올라가고 - 표시를 누르면 1이 내려가죠. 이때 + 표시를 계속해서 클릭하는 경우 숫자가 누를때 까지 계속해서 올라가도록 만들고자 합니다. 물론 - 표시를 계속 클릭할 경우 숫자는 계속 내려가야겠죠.@ key_pressing.html
<input id="count" type="number" value="0" />
<button id="plus">+</button>
<button id="minus">-</button>
<button id="plus">+</button>
<button id="minus">-</button>
@ key_pressing.js
var plusEle = document.querySelector('#plus');
var minusEle = document.querySelector('#minus');
var isPressed = false;
plusEle.addEventListener('mouseup', function(event) {
isPressed = false;
});
plusEle.addEventListener('mousedown', function(event) {
isPressed = true;
doInterval('1');
});
minusEle.addEventListener('mouseup', function(event) {
isPressed = false;
});
minusEle.addEventListener('mousedown', function(event) {
isPressed = true;
doInterval('-1');
});
function doInterval(action) {
if (isPressed) {
var countEle = document.querySelector('#count');
count.value = parseInt(count.value) + parseInt(action);
setTimeout(function() {
doInterval(action);
}, 200);
}
};
var minusEle = document.querySelector('#minus');
var isPressed = false;
plusEle.addEventListener('mouseup', function(event) {
isPressed = false;
});
plusEle.addEventListener('mousedown', function(event) {
isPressed = true;
doInterval('1');
});
minusEle.addEventListener('mouseup', function(event) {
isPressed = false;
});
minusEle.addEventListener('mousedown', function(event) {
isPressed = true;
doInterval('-1');
});
function doInterval(action) {
if (isPressed) {
var countEle = document.querySelector('#count');
count.value = parseInt(count.value) + parseInt(action);
setTimeout(function() {
doInterval(action);
}, 200);
}
};
이제 마우스를 계속 누르는 경우 숫자가 계속 오르거나 계속 내리게되는 예제가 만들어졌습니다. 아래는 이를 직접 구현한 모습입니다. 직접 클릭해보세요.
! 계속 클릭 이벤트 예제 동작해보기
아래의 글도 찾고 계시지 않나요?
